(function($){
	$.fn.changeImgZoom=function(options){
		var defaults = {"numThumb": 3};
		var settings = $.extend(defaults, options ||{});

		$(this).find("a").on("mouseover", function(){
			$("#imgZoomMain").attr("src",$(this).find("img").attr("src"));
			$("#imgZoomMain").elevateZoom({zoomType : "inner", cursor: "crosshair"});
		});

		$(".zoom-nav").belloSlideSet();
	}
    $.fn.changeModalImage = function(options){
        var defaults = {"modal": "#imageModal"};
        var settings = $.extend(defaults, options ||{});
        $(this).on('click', function(event) {
            event.preventDefault();
            var image = $(this).find("img").attr('src');
            $(settings.modal).find('.modal-body').html('<img src="'+image+'"/>');
        });
    }
    $(document).ready(function(e) {
        $("#imgZoomMain").elevateZoom({zoomType : "inner", cursor: "crosshair"});
        $(".zoom-nav").changeImgZoom({"numItem": 4});
        $(".zoom-images-box").find('.linimg-main').changeModalImage();
        $(".zoom-nav").find('.link-img-sce').changeModalImage();
    });
}(jQuery));



$.fn.belloSlideSet = function (options) {
    $.each($(this), function () {
        var slideOuter = $(this);
        //2 biến defaults và settings dùng để custom
        var defaults = { "eventX": "mouseover",
            "eventNot": "mouseleave",
            "slideItem": "slide-item",
            "timmer": 6000,
            "easing": 400,
            "autoPlay": true,
            "navControl": true,
            "orientation": "horizontal",
            "randomTime": false,
            "numItem": 4,
            "callback" : null
        };
        var settings = $.extend(defaults, options || {});
        //Biến dùng để lưu lại object html của ảnh chính
        var mainItem = $(this).find(".slide-item");
        //Thêm nav Control ! cái này khác với Nav Thumbnail, cái này chỉ gồm 2 button Next và Preview
        if (settings.navControl === true) {
            $(this).append($("<div/>", {
                "class": "slide-nav-control"
            }));
            $(this).find(".slide-nav-control").prepend($("<div/>", {
                "class": "btn btn-next-slide"
            }));
            $(this).find(".slide-nav-control").append($("<div/>", {
                "class": "btn btn-prev-slide"
            }));
            var navControl = $(this).find(".slide-nav-control");
            navControl.on(settings.eventX, function () {
                slideOuter.addClass("pause");
            });

            var position = 0;
            ///Click vào nav Control [--btnNext & btnPrev--] để thay đổi Slide
            slideOuterWidth = slideOuter.width();
            var slideInner = slideOuter.find(".z-nav-inner");
            var navButton = slideOuter.find(".slide-nav-control").find(".btn");
            var startItem = 0;
            mainItem.removeClass("active").fadeOut(0);
            mainItem.slice(startItem, startItem + settings.numItem).fadeIn(0, function () {
                $(this).addClass("active");
            });
            navButton.on("click", function () {
                if ($(this).attr("class").indexOf("btn-next-slide") > 0) {
                    position = 0;
                }
                if ($(this).attr("class").indexOf("btn-prev-slide") > 0) {
                    position = 1;
                }

                if (position === 0 && mainItem.last().hasClass("active") === false && mainItem.length > settings.numItem -1) {
                    startItem = startItem + settings.numItem;
                    slideInner.css({ "left": slideOuterWidth / settings.numItem, "right": "auto" });
                    mainItem.removeClass("active").fadeOut(300);
                    slideInner.animate({ "left": 0, "right": "auto" });
                    mainItem.slice(startItem, startItem + settings.numItem).fadeIn(0, function () {
                        $(this).addClass("active");
                    });
                }
                else if (mainItem.hasClass("active") && position === 1 && mainItem.first().hasClass("active") === false && mainItem.length > settings.numItem -1) {
                    startItem = startItem - settings.numItem;
                    slideInner.css({ "right": slideOuterWidth / 4, "left": "auto" });
                    mainItem.removeClass("active").fadeOut(300);
                    slideInner.animate({ "right": 0, "left": "auto" });
                    mainItem.slice(startItem, startItem + settings.numItem).fadeIn(0, function () {
                        $(this).addClass("active");

                    });
                }
            });
        }
    });
}